<template>
  <div class="websocket-container">
    <div class="connection-status">
      连接状态:
      <span :class="statusClass">{{ connectionStatus }}</span>
    </div>

    <div class="controls">
      <button
          @click="connect"
          :disabled="connectionStatus !== 'CLOSED'"
      >
        连接WebSocket
      </button>

      <button
          @click="disconnect"
          :disabled="connectionStatus === 'CLOSED'"
      >
        断开连接
      </button>
    </div>

    <div class="message-input">
      <input
          v-model="messageContent"
          type="text"
          placeholder="输入消息内容"
      >
      <button @click="sendMessage">发送消息</button>
    </div>

    <div class="message-list">
      <h3>接收的消息:</h3>
      <div
          v-for="(msg, index) in messages"
          :key="index"
          class="message-item"
      >
        <div class="message-type">[{{ msg.type }}]</div>
        <div class="message-content">{{ msg.content }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { webSocketService, WebSocketMessage } from '@/websocket';

// 当前用户ID（实际项目中应从登录信息获取）
const userId = ref('user1');

// 消息内容
const messageContent = ref('');

// 获取连接状态和消息列表
const connectionStatus = computed(() => webSocketService.connectionStatus.value);
const messages = computed(() => webSocketService.messages.value);

// 连接状态样式
const statusClass = computed(() => {
  switch (connectionStatus.value) {
    case 'OPEN':
      return 'status-connected';
    case 'CONNECTING':
      return 'status-connecting';
    case 'CLOSED':
      return 'status-closed';
    default:
      return 'status-closed';
  }
});

// 连接WebSocket
const connect = () => {
  webSocketService.initWebSocket(userId.value);
};

// 断开连接
const disconnect = () => {
  webSocketService.closeWebSocket();
};

// 发送消息
const sendMessage = () => {
  if (messageContent.value.trim()) {
    const message: WebSocketMessage = {
      type: 'chat',
      content: messageContent.value.trim()
    };

    const success = webSocketService.sendMessage(message);
    if (success) {
      messageContent.value = '';
    }
  }
};
</script>

<style scoped>
.websocket-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.connection-status {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.status-connected {
  color: green;
}

.status-connecting {
  color: orange;
}

.status-closed {
  color: red;
}

.controls {
  margin-bottom: 15px;
  display: flex;
  gap: 10px;
}

button {
  padding: 8px 16px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  background-color: #42b983;
  color: white;
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.message-input {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.message-input input {
  flex: 1;
  padding: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.message-list {
  border-top: 1px solid #e0e0e0;
  padding-top: 15px;
}

.message-item {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.message-type {
  font-weight: bold;
  margin-bottom: 5px;
  color: #35495e;
}
</style>
